<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>会员注册</title>
<style>
  body { font-family: Arial; }
  .container { width: 400px; margin: 20px auto; border: 1px solid #ccc; padding: 20px; }
  label { display: inline-block; width: 80px; margin-top: 10px; }
  input, select, textarea { margin-top: 10px; }
  #captchaCanvas { border: 1px solid #ccc; vertical-align: middle; cursor: pointer; }
  #preview { margin-top: 10px; max-width: 100px; max-height: 100px; display: block; }
</style>
</head>
<body>
<div class="container">
  <h3>欢迎注册会员</h3>
  <form>
    <label>手机号:</label>
    <input type="text" required placeholder="11位手机号"><span style="color:red">必填</span><br>
    <label>创建密码:</label>
    <input type="password" required placeholder="8位密码"><span style="color:red">必填</span><br>
    <label>注册邮箱:</label>
    <input type="email" required placeholder="例如:abc@xxx.com"><span style="color:red">必填</span><br>

    <!-- 验证码: 背景色图片 -->
    <label>验证码:</label>
    <input type="text" id="codeInput" size="6">
    <canvas id="captchaCanvas" width="100" height="40"></canvas>
    <button type="button" onclick="drawCaptcha()">↻</button><br>

    <label>性别:</label>
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女<br>

    <label>生日:</label>
    <input type="date"><br>

    <label>年龄:</label>
    <input type="number" min="0" max="100"><br>

    <label>籍贯:</label>
    <select>
      <option>湖北省</option>
      <option>湖南省</option>
    </select>
    <select>
      <option>武汉</option>
      <option>长沙</option>
    </select><br>

    <label>个人学历:</label>
    <select>
      <option>本科</option>
      <option>硕士</option>
      <option>博士</option>
    </select><br>

    <label>月薪:</label>
    <input type="range" id="salary" min="0" max="20000" value="5000">
    <span id="salaryVal">5000</span><br>

    <label>个人爱好:</label>
    <input type="checkbox">唱歌
    <input type="checkbox">跑步
    <input type="checkbox">游泳<br>

    <label>个人照片:</label>
    <input type="file" id="photo"><br>
    <img id="preview"><br>

    <label>个人简介:</label>
    <textarea rows="4" cols="30"></textarea><br>

    <button type="submit">提交</button>
    <button type="reset">重置</button>
  </form>
</div>

<script>
// 生成验证码
function randomCode() {
  const chars = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ';
  let code = '';
  for (let i = 0; i < 4; i++) {
    code += chars[Math.floor(Math.random() * chars.length)];
  }
  return code;
}

// 绘制验证码到canvas
function drawCaptcha() {
  const canvas = document.getElementById('captchaCanvas');
  const ctx = canvas.getContext('2d');
  const code = randomCode();

  // 随机背景色
  ctx.fillStyle = `rgb(${200+Math.random()*55},${200+Math.random()*55},${200+Math.random()*55})`;
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // 绘制验证码字符
  for (let i = 0; i < code.length; i++) {
    ctx.font = "20px Arial";
    ctx.fillStyle = `rgb(${Math.random()*150},${Math.random()*150},${Math.random()*150})`;
    const x = 15 + i * 20;
    const y = 25 + Math.random() * 8;
    ctx.fillText(code[i], x, y);
  }

  // 干扰线
  for (let i = 0; i < 5; i++) {
    ctx.strokeStyle = `rgb(${Math.random()*255},${Math.random()*255},${Math.random()*255})`;
    ctx.beginPath();
    ctx.moveTo(Math.random()*canvas.width, Math.random()*canvas.height);
    ctx.lineTo(Math.random()*canvas.width, Math.random()*canvas.height);
    ctx.stroke();
  }
}
drawCaptcha();

// 显示滑块值
document.getElementById('salary').addEventListener('input', function() {
  document.getElementById('salaryVal').innerText = this.value;
});

// 照片预览
document.getElementById('photo').addEventListener('change', function(e) {
  const file = e.target.files[0];
  if (file) {
    document.getElementById('preview').src = URL.createObjectURL(file);
  }
});
</script>
</body>
</html>